<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应拦截器 - 编辑响应内容</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: #f5f5f5;
      overflow: hidden;
    }

    .response-editor-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .editor-header {
      background: #2d3748;
      color: white;
      padding: 12px 16px;
      border-bottom: 1px solid #4a5568;
    }

    .editor-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .editor-subtitle {
      font-size: 12px;
      color: #a0aec0;
      word-break: break-all;
    }

    .editor-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .editor-tabs {
      display: flex;
      background: white;
      border-bottom: 1px solid #e2e8f0;
      padding: 0 16px;
    }

    .tab-button {
      padding: 12px 16px;
      background: none;
      border: none;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      font-size: 14px;
      color: #4a5568;
      transition: all 0.2s;
    }

    .tab-button.active {
      color: #3182ce;
      border-bottom-color: #3182ce;
    }

    .tab-button:hover {
      background: #f7fafc;
    }

    .tab-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .tab-panel {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      display: none;
    }

    .tab-panel.active {
      display: flex;
      flex-direction: column;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #2d3748;
      margin-bottom: 6px;
    }

    .form-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-size: 14px;
      transition: border-color 0.2s;
    }

    .form-input:focus {
      outline: none;
      border-color: #3182ce;
      box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
    }

    .form-textarea {
      width: 100%;
      min-height: 300px;
      padding: 12px;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 13px;
      line-height: 1.5;
      resize: vertical;
      transition: border-color 0.2s;
    }

    .form-textarea:focus {
      outline: none;
      border-color: #3182ce;
      box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
    }

    .headers-container {
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      max-height: 300px;
      overflow-y: auto;
    }

    .header-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      border-bottom: 1px solid #f7fafc;
      font-family: monospace;
      font-size: 13px;
    }

    .header-item:last-child {
      border-bottom: none;
    }

    .header-name {
      color: #3182ce;
      font-weight: 500;
      margin-right: 8px;
      min-width: 150px;
    }

    .header-value {
      color: #2d3748;
      word-break: break-all;
    }

    .editor-actions {
      background: white;
      padding: 16px;
      border-top: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .action-group {
      display: flex;
      gap: 12px;
    }

    .btn {
      padding: 10px 16px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-primary {
      background: #3182ce;
      color: white;
    }

    .btn-primary:hover {
      background: #2c5aa0;
    }

    .btn-secondary {
      background: #e2e8f0;
      color: #4a5568;
    }

    .btn-secondary:hover {
      background: #cbd5e0;
    }

    .btn-danger {
      background: #e53e3e;
      color: white;
    }

    .btn-danger:hover {
      background: #c53030;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #48bb78;
    }

    .loading {
      display: none;
      align-items: center;
      gap: 8px;
      color: #4a5568;
      font-size: 14px;
    }

    .loading.show {
      display: flex;
    }

    .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid #e2e8f0;
      border-top: 2px solid #3182ce;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes slideIn {
      0% { 
        transform: translateX(100%);
        opacity: 0;
      }
      100% { 
        transform: translateX(0);
        opacity: 1;
      }
    }

    .error-message {
      background: #fed7d7;
      color: #9b2c2c;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 16px;
      font-size: 14px;
    }

    .success-message {
      background: #c6f6d5;
      color: #22543d;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 16px;
      font-size: 14px;
    }

    .format-hint {
      background: #ebf8ff;
      color: #2c5aa0;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 12px;
      margin-top: 8px;
    }

    .compression-info {
      background: #fffaf0;
      color: #c05621;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 12px;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <div class="response-editor-container">
    <!-- 头部 -->
    <div class="editor-header">
      <div class="editor-title">响应拦截器</div>
      <div class="editor-subtitle" id="response-url">等待加载...</div>
    </div>

    <!-- 内容区域 -->
    <div class="editor-content">
      <!-- 标签页 -->
      <div class="editor-tabs">
        <button class="tab-button active" data-tab="response">响应内容</button>
        <button class="tab-button" data-tab="headers">响应头</button>
        <button class="tab-button" data-tab="settings">设置</button>
      </div>

      <!-- 标签页内容 -->
      <div class="tab-content">
        <!-- 响应内容编辑 -->
        <div class="tab-panel active" id="tab-response">
          <div id="compression-warning" class="compression-info" style="display: none;">
            检测到响应内容使用了压缩编码，已自动解压缩。提交时将保持原有压缩格式。
          </div>
          
          <div class="form-group">
            <label class="form-label">状态码</label>
            <input type="number" class="form-input" id="response-status" placeholder="200" min="100" max="599">
          </div>

          <div class="form-group">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
              <label class="form-label" style="margin-bottom: 0;">响应内容</label>
              <button class="btn btn-secondary" id="btn-copy" style="padding: 4px 8px; font-size: 12px;">复制</button>
            </div>
            <textarea class="form-textarea" id="response-body" placeholder="在此编辑响应内容..."></textarea>
            <div class="format-hint">
              支持 JSON、HTML、文本等格式。修改后点击"应用修改"按钮将更改发送到页面。
            </div>
          </div>
        </div>

        <!-- 响应头编辑 -->
        <div class="tab-panel" id="tab-headers">
          <div class="form-group">
            <label class="form-label">响应头</label>
            <div class="headers-container" id="headers-list">
              <!-- 响应头将在这里动态生成 -->
            </div>
          </div>
        </div>

        <!-- 设置 -->
        <div class="tab-panel" id="tab-settings">
          <div class="form-group">
            <label class="form-label">原始请求信息</label>
            <div class="form-input" id="request-info" style="background: #f7fafc; color: #4a5568;">
              等待加载...
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">响应大小</label>
            <div class="form-input" id="response-size" style="background: #f7fafc; color: #4a5568;">
              计算中...
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">内容类型</label>
            <div class="form-input" id="content-type" style="background: #f7fafc; color: #4a5568;">
              未知
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="editor-actions">
      <div class="status-indicator">
        <div class="status-dot"></div>
        <span>响应已拦截，等待修改</span>
      </div>

      <div class="loading" id="loading">
        <div class="spinner"></div>
        <span>正在应用修改...</span>
      </div>

      <div class="action-group">
        <button class="btn btn-secondary" id="btn-reset">重置</button>
        <button class="btn btn-danger" id="btn-cancel">取消拦截</button>
        <button class="btn btn-primary" id="btn-apply">应用修改</button>
      </div>
    </div>
  </div>

  <script src="assets/response-editor-script.js"></script>
</body>
</html>